<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ page import="java.util.Date"%>
<%@ page import="java.text.DateFormat"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@include file="/WEB-INF/jsp/base.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>服务支持管理</title>
<link rel="shortcut icon" href="favicon.ico">
<link href="css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
<link href="css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
<!-- Data Tables -->
<link href="css/plugins/dataTables/dataTables.bootstrap.css"
	rel="stylesheet">
<link href="css/animate.min.css" rel="stylesheet">
<link href="css/style.min.css?v=4.0.0" rel="stylesheet">
<link href="css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
<script src="./js/plugins/sweetalert/sweetalert.min.js"></script>
<script src="js/jquery.min.js?v=2.1.4"></script>
<script src="js/bootstrap.min.js?v=3.3.5"></script>
<script src="js/plugins/jeditable/jquery.jeditable.js"></script>
<script src="js/plugins/dataTables/jquery.dataTables.js"></script>
<script src="js/plugins/dataTables/dataTables.bootstrap.js"></script>
<script src="js/content.min.js?v=1.0.0"></script>
<script type="text/javascript" src="js/plugins/modal/bootstrap-modal.js"></script>
<script src="js/common.js"></script>
<style type="text/css">
.productTable {
	border-collapse: separate;
	border-spacing: 10px;
}
/* dataTables列内容居中 */
.table>tbody>tr>td {
	text-align: center;
}

/* dataTables表头居中 */
.table>thead:first-child>tr:first-child>th {
	text-align: center;
}
</style>
<script type="text/javascript">
	function FormatDate(date) {
		return date.getFullYear() + "-" + (date.getMonth() + 1) + "-"
				+ date.getDate();
	}

	var table;
	var darw = 0;
	$(function() {

		//提示信息
		var lang = {
			"sProcessing" : "<div style=\"float:right;width:50%\" >处理中...</div>",
			"sLengthMenu" : "每页 _MENU_ 项",
			"sZeroRecords" : "没有匹配结果",
			"sInfo" : "当前显示第 _START_ 至 _END_ 项，共 _TOTAL_ 项。",
			"sInfoEmpty" : "当前显示第 0 至 0 项，共 0 项",
			"sInfoFiltered" : "(由 _MAX_ 项结果过滤)",
			"sInfoPostFix" : "",
			"sSearch" : "搜索:",
			"sUrl" : "",
			"sEmptyTable" : "表中数据为空",
			"sLoadingRecords" : "载入中...",
			"sInfoThousands" : ",",
			"oPaginate" : {
				"sFirst" : "首页",
				"sPrevious" : "上页",
				"sNext" : "下页",
				"sLast" : "末页",
				"sJump" : "跳转"
			},
			"oAria" : {
				"sSortAscending" : ": 以升序排列此列",
				"sSortDescending" : ": 以降序排列此列"
			}
		};

		//初始化表格
		table = $("#productDatatabel")
				.dataTable(
						{

							"fnDrawCallback" : function() {

								var api = this.api();
								var startIndex = api.context[0]._iDisplayStart;//获取到本页开始的条数
								api.column(0).nodes().each(function(cell, i) {
									cell.innerHTML = startIndex + i + 1;
								});

							},
							language : lang, //提示信息
							autoWidth : false, //禁用自动调整列宽
							stripeClasses : [ "odd", "even" ], //为奇偶行加上样式，兼容不支持CSS伪类的场合
							processing : true, //隐藏加载提示,自行处理

							serverSide : true, //启用服务器端分页
							searching : false, //禁用原生搜索
							orderMulti : false, //启用多列排序
							order : [], //取消默认排序查询,否则复选框一列会出现小箭头
							renderer : "bootstrap", //渲染样式：Bootstrap和jquery-ui
							pagingType : "simple_numbers", //分页样式：simple,simple_numbers,full,full_numbers
							"aLengthMenu" : [ 10 ],
							"bLengthChange" : false,//屏蔽tables的一页展示多少条记录的下拉列表
							ordering : false, //关闭排序图标
							bStateSave : true, //刷新 停留在当前页
							ajax : function(data, callback, settings) {
								//封装请求参数
								var param = {};
								param.limit = data.length;//页面显示记录条数，在页面显示每页显示多少项的时候
								param.start = data.start;//开始的记录序号
								param.page = (data.start / data.length) + 1;//当前页码
								// param.darw=darw;  //计数器

								var productName = $("#serachPname").val()
										.trim();
								if (productName != null && productName != "") {
									param.ServiceSupportName = productName;
								}

								//console.log(param);
								//ajax请求数据
								$
										.ajax({
											type : "POST",
											url : "queryServiceSupportList.do",
											cache : false, //禁用缓存
											data : param, //传入组装的参数
											dataType : "json",
											success : function(result) {

												//console.log(result);
												//setTimeout仅为测试延迟效果
												//封装返回数据
												var returnData = {};
												draw = result.draw;//后台返回的计数器
												returnData.draw = data.draw;//这里直接自行返回了draw计数器,应该由后台返回
												returnData.recordsTotal = result.total;//返回数据全部记录
												returnData.recordsFiltered = result.total;//后台不实现过滤功能，每次查询均视作全部结果
												returnData.data = result.data;//返回的数据列表

												//console.log(returnData);
												//调用DataTables提供的callback方法，代表数据已封装完成并传回DataTables进行渲染
												//此时的数据需确保正确无误，异常判断应在执行此回调前自行处理完毕
												callback(returnData);
											},
											error : function() {
												sweetAlert("异常", "网络出现异常!",
														"error");
											}
										});
							},
							//列表表头字段
							columns : [
							/*         {"data":null},
							{
							"data":"id","visible":false
							} */
							{
								"data" : null
							}, {
								"data" : "serviceName"
							}, {
								"data" : "servicePhone"
							}, {
								"data" : "address"
							/* },
							{
								"data" : function(data) {
									if (data.serviceContent == null) {
										return "-";
									}
									if (data.introduce.length > 20) {
										return data.serviceContent.substr(0,
												20)
												+ "...";
									} else {
										return data.serviceContent;
									}
								} */
							} ],
							columnDefs : [ {
								"targets" : [ 4 ], //第11列加一条 自定义列
								"data" : "serviceId", //数据列名
								"render" : function(data, type, full) { //返回自定义的内容

									return "<\a>&nbsp;<a class=\"btn btn-primary  btn-xs\"   href=\"javascript:void(0);\" onclick=\"toModify('"
											+ data
											+ "')\">编辑<\a>&nbsp;"
											+ "<a class=\"btn btn-danger  btn-xs\" href=\"javascript:void(0);\" onclick=\"deleteProduct('"
											+ data + "')\">删除<\a>";

								}

							}

							]
						})//.api();
		//此处需调用api()方法,否则返回的是JQuery对象而不是DataTables的API对象

	});
</script>
<script type="text/javascript">
	//显示添加服务支持的modal
	function showAddModal() {
		$("#productFormInfo")[0].reset();
		$("#addProductModal").modal("show");

	}
</script>
</head>
<body class="gray-bg">
	<div class="row">
		<div class="col-sm-12">
			<div class="ibox float-e-margins">
				<div class="ibox-title">
					<h5>服务支持列表</h5>
					<div class="ibox-content">
						<div class="input-group col-md-3"
							style="margin-top: 0px; positon: relative; float: left; bottom: -5px;">
							<input id="serachPname" type="text" class="form-control "
								placeholder="请输入关键字（服务支持名称、介绍）"/ > <span
								class="input-group-btn">
								<button onclick="search()" class="btn btn-info btn-search">查询</button>
								<button class="btn btn-info btn-search" onclick="showAddModal()"
									style="margin-left: 5px">添加</button>

							</span>
						</div>
						<table id="productDatatabel"
							class="table table-striped table-bordered table-hover dataTables-example dataTable">
							<thead>
								<tr>
									<th>序号</th>
									<th>人员名称</th>
									<th>人员电话</th>
									<th>公司名称</th>
									<!-- <th>支持内容</th> -->
									<th>操作</th>
								</tr>
							</thead>
						</table>
					</div>
				</div>
			</div>
		</div>


		<!--添加服务支持的 modal  -->
		<div class="modal fade  " id='addProductModal'>
			<div class="modal-dialog" style="width: 500px; height: 300px;">
				<div class="modal-content">
					<div class="modal-header">
						<button class="close" data-dismiss='modal'>×</button>
						<h2 class="modal-title" align="center">添加服务支持信息</h2>
					</div>

					<div class="modal-body" align="center">

						<form id="productFormInfo" enctype="multipart/form-data">
							<table id="addTable" class="productTable">
								<tr>
									<td align="right">人员名称<span style="color: red;">*</span>：
									</td>
									<td><input id="productName" class="form-control"
										placeholder="请输入服务支持人员名称" type="text" name="serviceName"></td>
								</tr>
								<tr>
									<td align="right">人员电话<span style="color: red;">*</span>：
									</td>
									<td><input class="form-control" placeholder="请输入服务支持人员电话"
										id="yield" type="text" name="servicePhone"></td>
								</tr>
								<tr>
									<td align="right">公司名称<span style="color: red;">*</span>：
									</td>
									<td><input class="form-control" placeholder="请输入服务支持区域"
										id="totalPeriods" type="text" name="address"></td>
								</tr>
								<!-- 	<tr>
									<td align="right">支持内容<span style="color: red;">*</span>：
									</td>
									<td><textarea class="form-control" placeholder="请输入服务支持内容"
											id="introduce" name="serviceContent" style="resize: none;"
											rows="5" cols="50"></textarea></td>
								</tr> -->
							</table>
							<input type="hidden" name="status" value="0">
						</form>

					</div>
					<div class="modal-footer" align="center">
						<div align="center">
							<button class="btn btn-primary" id="btnAddProduct">确认</button>
							<!-- <button class="btn btn-default"
								onclick="closeModal(addProductModal)">关闭</button> -->
						</div>
					</div>
				</div>
			</div>
		</div>


		<!-- 修改模态框 -->
		<div class="modal fade  " id='editModal'>
			<div class="modal-dialog" style="width: 500px; height: 300px;">
				<div class="modal-content">
					<div class="modal-header">
						<button class="close" data-dismiss='modal'>×</button>

						<h2 class="modal-title" align="center">修改服务支持信息</h2>
					</div>

					<div class="modal-body" align="center">
						<form class="form-horizontal m-t" id="editForm">
							<div class="row form-body form-horizontal m-t">
								<div class="form-group draggable">
									<label class="col-sm-3 control-label">人员名称<span
										style="color: red;">*</span>：
									</label>
									<div class="col-sm-8">
										<input type="text" name="serviceName" id="eproductName"
											class="form-control" placeholder="请输入服务支持名称"> <input
											type="hidden" name="serviceId" id="eproductId">
									</div>
								</div>
								<div class="form-group draggable">
									<label class="col-sm-3 control-label">人员电话<span
										style="color: red;">*</span>：
									</label>
									<div class="col-sm-8">
										<input type="text" name="servicePhone" id="eyield"
											class="form-control" placeholder="请输入服务支持人员电话">
									</div>
								</div>
								<div class="form-group draggable">
									<label class="col-sm-3 control-label">公司名称<span
										style="color: red;">*</span>：
									</label>
									<div class="col-sm-8">
										<input type="text" name="address" id="etotalPeriods"
											class="form-control" placeholder="请输入服务支持公司">
									</div>
								</div>
							</div>
						</form>
					</div>
					<div class="modal-footer" align="center">
						<div align="center">
							<button class="btn btn-primary" onclick="modifyProduct()">确认</button>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script>
			//根据id来关闭 modal
			function closeModal(id) {
				$(id).modal("hide");
			}

			//修改窗口展示
			function toModify(productId) {
				$.ajax({
					url : "toModifyServiceSupport.do",
					data : {
						ServiceSupportId : productId
					},
					dataType : "json",
					type : "post",
					success : function(result) {
						if (result.code == 0) {
							$("#eproductId").val(productId);
							$("#eproductName").val(result.data.serviceName);
							$("#eyield").val(result.data.servicePhone);
							$("#etotalPeriods").val(result.data.address);
							$("#editModal").modal("show");
						} else {
							swal("提示", "获取信息失败", "error");
						}

					},
					error : function() {
						swal("提示", "操作失败,请刷新后重试!", "error");
					}

				});

			}

			//修改服务支持
			function modifyProduct() {
				var productName = $("#eproductName");
				var eyield = $("#eyield");
				var etotalPeriods = $("#etotalPeriods");

				if (productName.val() == "") {
					sweetAlert("错误", "请输服务支持人员名称!", "error");
					return false;
				}
				if (eyield.val() == "") {
					sweetAlert("错误", "请输入服务支持人员电话!", "error");
					return false;
				}
				if (etotalPeriods.val() == "") {
					sweetAlert("错误", "请输入服务支持公司!", "error");
					return false;
				}
				var formData = new FormData($("#editForm")[0]);

				$.ajax({
					url : "modifyServiceSupport.do",
					data : formData,
					dataType : "json",
					type : "post",
					contentType : false,
					processData : false,
					success : function(result) {
						if (result.code == 0) {
							swal({
								title : "提示",
								text : "修改成功！",
								type : "success",
								confirmButtonColor : "#DD6B55",
								confirmButtonText : "确定",
								closeOnConfirm : true
							}, function() {
								search();
								$("#editModal").modal("hide");
							});
						} else {
							swal("提示", "修改失败！", "error");
						}

					},
					error : function() {
						swal("异常", "操作失败,请刷新后重试!", "error");
					}

				})

			}

			//删除服务支持
			function deleteProduct(productId) {
				swal({
					title : "提示",
					text : "您确定要删除这条信息吗！",
					type : "warning",
					showCancelButton : true,
					confirmButtonColor : "#DD6B55",
					confirmButtonText : "删除",
					cancelButtonText : "取消",
					closeOnConfirm : false
				}, function() {
					$.ajax({
						type : "post",
						dataType : "json",
						url : "deleteServiceSupport.do",
						data : {
							"ServiceSupportId" : productId
						},
						success : function(data) {
							if (data.code == 0) {
								swal({
									title : "提示",
									text : "删除成功！",
									type : "success",
									confirmButtonColor : "#DD6B55",
									confirmButtonText : "确定"
								}, function() {
									search();
								});

							} else {
								swal("提示", "删除失败！", "error");
							}
						},
						error : function() {
							swal("提示", "操作失败,请刷新后重试!", "error");

						}
					});
				});
			}
		</script>
		<script type="text/javascript">
			$(function() {
				// 提交add product
				$("#btnAddProduct").click(function() {
					var productName = $("#productName").val().trim();
					//var introduce = $("#introduce").val().trim();
					var yield = $("#yield").val().trim(); //
					var totalPeriods = $("#totalPeriods").val().trim(); //
					if (productName == "" || productName == null) {
						sweetAlert("错误", "请输入服务支持人员名称!", "error");
						return false;
					}

					/* if (introduce == "" || introduce==null) {
						sweetAlert("错误", "请输入服务支持内容!", "error");
						return false;
					} */
					if (yield == "" || yield == null) {
						sweetAlert("错误", "请输入服务支持电话!", "error");
						return false;
					}

					if (totalPeriods == "" || totalPeriods == null) {
						sweetAlert("错误", "请输入服务支持公司!", "error");
						return false;
					}

					var formData = new FormData($("#productFormInfo")[0]);
					// $("#productFormInfo").serailizeArray(),
					$.ajax({
						url : "saveServiceSupport.do",
						data : formData,
						dataType : "json",
						type : "post",
						contentType : false,
						processData : false,
						success : function(result) {
							if (result.code == 0) {
								swal({
									title : "提示",
									text : "添加成功!",
									type : "success",
									confirmButtonColor : "#DD6B55",
									confirmButtonText : "确定"
								}, function() {
									search();
									$("#addProductModal").modal("hide");
								});

							} else if (result.code == -2) {
								sweetAlert("提示", "添加失败", "error");
							} else {
								sweetAlert("提示", "操作失败,请刷新后重试", "error");
							}

						},
						error : function() {
							sweetAlert("异常", "网络出现异常!", "error");
						}

					});

				});

			})
			//查询
			function search() {
				/* var oSettings = table.fnSettings();  
				oSettings._iDisplayStart = 0;  
				table.fnDraw(oSettings);   */
				table.fnDraw();
			}
			//关闭modal
			function modalClose(htmlObj) {
				$(htmlObj).modal("hide");
			}
		</script>
</body>
</html>